<template>
  <div class="container">
    <div class="down-container">
      <div>
        <el-button class="btn delete" @click="goBack">返回</el-button>
      </div>
    </div>
    <div id="map"></div>
    <!--  图层控件  -->
    <div class="airspaceLayer" @click="airspaceControl"></div>
    <!-- 图层控制 -->
    <div v-if="layerVisible" class="layerControl">
      <el-checkbox
        v-model="satellite"
        label="卫星地图"
        @change="swicthSatellite"
        size="large"
      />
      <el-checkbox
        v-model="grid"
        label="网格"
        @change="handleGrid"
        size="large"
      />
    </div>

    <el-table
      :data="trackList"
      :header-cell-style="headClass"
      class="trackContainer"
      max-height="330"
    >
      <!-- 飞手 -->
      <el-table-column
        label="飞手"
        prop="flyingHand"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      />
      <!-- 航空器 -->
      <el-table-column
        label="航空器"
        prop="aircraftId"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      />
      <!-- 当前时间 -->
      <el-table-column
        label="数据时间"
        prop="alartTime"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      />
      <!-- 高度 -->
      <el-table-column
        label="高度"
        prop="height"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      >
        <template #default="{ row }">
          {{ row.height + "米" }}
        </template>
      </el-table-column>
      <!-- 速度 -->
      <el-table-column
        label="速度"
        prop="speed"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      >
        <template #default="{ row }">
          {{ row.speed + "米/秒" }}
        </template>
      </el-table-column>
      <!-- 方向角 -->
      <el-table-column
        label="方向角"
        prop="directionAngle"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.directionAngle">{{ row.directionAngle + "°" }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <!-- 经度 -->
      <el-table-column
        label="经度"
        prop="longitude"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      />
      <!-- 纬度 -->
      <el-table-column
        label="纬度"
        prop="latitude"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      />
      <!-- 报警类型 -->
      <el-table-column
        label="报警类型"
        prop="alartType"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      />
      <!-- 航空器详情 -->
      <el-table-column
        label="航空器详情"
        prop="dronePosition"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      >
        <template #default="{ row }">
          <div class="aircraftDetail" @click="dronePositionBtn(row)">
            航空器详情
          </div>
        </template>
      </el-table-column>
      <!-- 飞行计划详情 -->
      <el-table-column
        label="飞行计划详情"
        prop="flyingHandPos"
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      >
        <template #default="{ row }">
          <div class="flightPlanDetail" @click="flyingHandPosBtn(row)">
            飞行计划详情
          </div>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        label="操作"
        prop=""
        :show-overflow-tooltip="true"
        min-width="110"
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.status === 0">未解除</span>
          <span v-if="row.status === 1">已解除</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="detailTabs" v-if="detailTabs" v-drag>
      <el-tabs v-model="activeName">
        <el-tab-pane label="无人机信息 " name="first">
          <div>
            <div class="content-line">
              <span>无人机型号:</span>
              <span class="contant">{{
                `${droneModelList.brandName} - ${droneModelList.modelType}`
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机SN:</span>
              <span class="contant">{{
                droneModelList.flightControlSn
                  ? `${droneModelList.flightControlSn}`
                  : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机ID:</span>
              <span class="contant">{{
                droneModelList.ID ? `${droneModelList.ID}` : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>起飞时间:</span>
              <span class="contant">{{
                droneModelList.takeoffTime
                  ? `${droneModelList.takeoffTime}`
                  : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机坐标:</span>
              <span class="contant">{{
                droneModelList.curLongitude
                  ? `${droneModelList.curLongitude} ${droneModelList.curLatitude}`
                  : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机速度:</span>
              <span class="contant">{{
                droneModelList.curSpeed
                  ? `${droneModelList.curSpeed} 米/s`
                  : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>无人机高度:</span>
              <span class="contant">{{
                droneModelList.curHeight
                  ? `${droneModelList.curHeight} 米`
                  : "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>方向角:</span>
              <span class="contant">{{
                droneModelList.directionAngle
                  ? `${droneModelList.directionAngle}°`
                  : "-"
              }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="飞手信息" name="third">
          <div>
            <div class="content-line">
              <span>飞手姓名:</span>
              <span class="contant">{{ flyingHandInfo.userName || "-" }}</span>
            </div>
            <div class="content-line">
              <span>飞手性别:</span>
              <span class="contant">{{ flyingHandInfo.sex || "-" }}</span>
            </div>
            <div class="content-line">
              <span>飞手联系方式:</span>
              <span class="contant">{{
                flyingHandInfo.phoneNumber || "-"
              }}</span>
            </div>
            <div class="content-line">
              <span>证件号码:</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="flyingHandInfo.credentialsNumber"
                placement="top"
              >
                <span class="contant">{{
                  flyingHandInfo.credentialsNumber || "-"
                }}</span>
              </el-tooltip>
            </div>
            <div class="content-line">
              <span>居住地址:</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="flyingHandInfo.residentialAddress"
                placement="top"
              >
                <span class="contant">{{
                  flyingHandInfo.residentialAddress || "-"
                }}</span>
              </el-tooltip>
            </div>
            <div class="content-line">
              <span>飞行执照:</span>
              <span class="contant">{{
                flyingHandInfo.pilotLicense || "-"
              }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="飞行计划" name="fourth">
          <div class="content-line">
            <span>飞行计划编号:</span>
            <span class="contant">{{ flightPlan.flyApplyCode }}</span>
          </div>
          <div class="content-line">
            <span>申请人:</span>
            <span class="contant">{{ flightPlan.applicant }}</span>
          </div>
          <div class="content-line">
            <span>飞行计划范围:</span>
            <span class="contant">
              <el-checkbox v-model="showAirspace"></el-checkbox
              >显示飞行范围/航线</span
            >
          </div>
          <div class="content-line">
            <span>起飞点:</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="flightPlan.takeOffPointAddress"
              placement="top"
            >
              <span class="contant">{{
                flightPlan.takeOffPointAddress || "--"
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>降落点:</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="flightPlan.landingPointAddress"
              placement="top"
            >
              <span class="contant">{{
                flightPlan.landingPointAddress || "--"
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>飞行计划底高:</span>
            <span class="contant">{{
              `${flightPlan.lowHeight} 米` || "--"
            }}</span>
          </div>
          <div class="content-line">
            <span>飞行计划顶高:</span>
            <span class="contant">{{
              `${flightPlan.topHeight} 米` || "--"
            }}</span>
          </div>
          <div class="content-line">
            <span>飞行时间段:</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="`${flightPlan.startTime}~${flightPlan.endTime}`"
              placement="top"
            >
              <span class="contant">{{
                `${flightPlan.startTime}~${flightPlan.endTime}`
              }}</span>
            </el-tooltip>
          </div>
          <div class="content-line">
            <span>飞行任务性质:</span>
            <span class="contant">{{ flightPlan.taskName || "--" }}</span>
          </div>
          <div class="content-line">
            <span>飞行模式:</span>
            <span class="contant">{{ flightPlan.flightMode || "--" }}</span>
          </div>
          <div class="content-line">
            <span>操作模式:</span>
            <span class="contant">{{ flightPlan.operatorMode || "--" }}</span>
          </div>
          <div class="content-line">
            <span>任务审批文件:</span>
            <span class="contant">
              <span v-if="!flightPlan.files">{{ "--" }}</span>
              <el-tooltip
                v-else
                v-for="file in flightPlan.files"
                :key="file.fileId"
                class="box-item"
                effect="dark"
                :content="`${file.fileName}.${file.fileExtension}`"
                placement="top"
              >
                <span>{{ `${file.fileName}.${file.fileExtension}` }}</span>
              </el-tooltip>
            </span>
          </div>
          <div class="content-line">
            <span>应急处置预案:</span>
            <span class="contant">{{ flightPlan.emergencyPlan || "--" }}</span>
          </div>
          <div class="content-line">
            <span>备注说明:</span>
            <span class="contant">{{ flightPlan.remark || "--" }}</span>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <div class="goBack" @click="detailTabs = false">关闭</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AlarmMonitorDetail",
};
</script>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import {
  getConditionsList,
  dronelocationFlight,
} from "@/api/alarmMonitor/alarmMonitor";
import { getFlyapplyDetailApi } from "@/api/flightTask/flyApply"; //飞行计划
import { getPersonDetail } from "@/api/dataManagement/dataUser"; //飞手
import { getDetailByDeviceSn } from "@/api/dataManagement/device"; //飞行器
import { gcj02towgs84, wgs84togcj02 } from "@/utils/coordinateTrans.js";
import { useRoute } from "vue-router";
const route = useRoute();
const { proxy } = getCurrentInstance();
const showAirspace = ref("");
let satellite = ref("");
let grid = ref("");
let aMap = null;
const trackList = ref([]);
const detailTabs = ref(false);
const flightPlan = ref({});
const flyingHandInfo = ref({});
const droneModelList = ref([]);
const activeName = ref("first");

function headClass({ row, rowIndex }) {
  if (rowIndex === 0) {
    return {
      background: "#FFFFFF !important",
      color: "#000000",
      fontSize: "16px",
      fontWeight: "400",
      height: "73px",
    };
  }
}

const goBack = () => {
  proxy.$router.go(-1);
};

/**
 * @获取详情
 * */
async function getDetailInfo() {
  await getConditionsList({ eventId: route.query.eventId }).then((res) => {
    if (res.code === 200) {
      trackList.value = res.rows;
      if (trackList.value[0].aircraftId)
        getAircraft(trackList.value[0].aircraftId);
      if (trackList.value[0].flyApplyId)
        flyingHandDetail(trackList.value[0].flyApplyId);
    }
  });
}

/**
 * @航空器详情接口查询
 * */
function getAircraft(id) {
  getDetailByDeviceSn(id).then((res) => {
    if (res.code === 200) {
      droneModelList.value = res.data;
    }
  });
}

/**
 * @航空器详情
 * */
function dronePositionBtn(val) {
  activeName.value = "first";
  detailTabs.value = true;
  // getAircraft(val.aircraftId);
}

/**
 * @飞行计划详情
 * */
function flyingHandPosBtn(val) {
  activeName.value = "fourth";
  detailTabs.value = true;
  // flyingHandDetail(val.flyApplyId);
}

let flyingId = "";
let flightArea = null; // 判断是航线还是空域
let airlinePoints = ""; // 航线数据

/**
 * @飞行计划详情接口查询
 * */
let position = null;
function flyingHandDetail(id) {
  getFlyapplyDetailApi(id).then((res) => {
    if (res.code === 200) {
      let data = res.data;
      flightPlan.value = {
        ...data.airspaceApply,
        ...data.flyApply,
        files: data.tlowairServiceFiles,
      };
      flyingId = data.flyApply.flyingId;
      getFlyingInfo(flyingId);
      flightArea = data.airspaceApply.flightArea;
      airlinePoints = data.airspaceApply.airlinePoints;

      let arr1 = airlinePoints.split(",");
      let arr2 = arr1.map((item) => {
        return item.split("@");
      });
      let arr3 = arr2.map((item) => {
        let [lon, lat] = gcj02towgs84(item[0], item[1]);
        return [lon, lat, item[2] * 1];
      });
      position = arr3;
      // let position = arr3.flat();
      // trajectory();
    }
  });
}

/**
 * @飞行事实轨迹
 * */
let trullyPosition = null;
let trullyPositionOk = [];
function trullyFlyTrajectory() {
  dronelocationFlight({ batchNo: route.query.droneUK }).then((res) => {
    if (res.code === 200) {
      trullyPosition = res.data.coors;
      // let list = [];
      trullyPositionOk = trullyPosition.map((item) => {
        let [lon, lat] = wgs84togcj02(item.longitude, item.latitude);
        return [lon, lat];
      });
      trajectoryTrully();
    }
  });
}

function getFlyingInfo(flyingId) {
  getPersonDetail(flyingId).then((res) => {
    if (res.code === 200) {
      flyingHandInfo.value = res.data;
    }
  });
}

//----------------------------------------地图
/**
 * @地图初始化
 * */
const initMap = () => {
  aMap = new AMap.Map("map", {
    viewMode: "3D",
    zoom: 12,
    center: [120.209947, 30.245853],
    mapStyle: "amap://styles/fresh",
    resizeEnable: true,
  });
};

const layerVisible = ref(false);
/**
 * @显示图层控件
 * */
const airspaceControl = () => {
  layerVisible.value = !layerVisible.value;
};
// 构造官方卫星、路网图层
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
/**
 * @切换卫星地图
 * */
const swicthSatellite = (val) => {
  if (val) {
    aMap.add(satelliteLayer);
  } else {
    aMap.remove(satelliteLayer);
  }
};
/**
 * @切换路网地图
 * */
const handleGrid = (val) => {
  if (val) {
    aMap.add(roadNetLayer);
  } else {
    aMap.remove(roadNetLayer);
  }
};
// -----------------------------------------轨迹播放
let line1 = [
  [119.899013, 30.266497],
  [119.994008, 30.294175],
  [120.08232, 30.263244],
  [120.121304, 30.309847],
  [120.22, 30.3],
];

function trajectory() {
  let marker1 = new AMap.Marker({
    map: aMap,
    position: [119.899013, 30.266497],
    icon: "/public/img/cockpit/UAVNormal.png",
    offset: new AMap.Pixel(-13, -26),
  });
  marker1.on("moving", function (e) {
    passedPolyline.setPath(e.passedPath);
    aMap.setCenter(e.target.getPosition(), true);
  });
  let polyline1 = new AMap.Polyline({
    map: aMap,
    path: position,
    showDir: true,
    strokeColor: "#28F", //线颜色
    // strokeOpacity: 1,     //线透明度
    strokeWeight: 6, //线宽
    // strokeStyle: "solid"  //线样式
  });
  var passedPolyline = new AMap.Polyline({
    map: aMap,
    strokeColor: "#AF5", //线颜色
    strokeWeight: 6, //线宽
  });

  // let markerList = [marker1];
  // let lineList = [position];

  // AMap.plugin("AMap.MoveAnimation", () => {
  //   markerList.forEach((item, index) => {
  //     item.moveAlong(lineList[index], {
  //       // 每一段的时长
  //       duration: 500, //可根据实际采集时间间隔设置
  //       // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
  //       // autoRotation: true,
  //     });
  //   });
  //   // marker1.moveAlong(line1, {
  //   //   // 每一段的时长
  //   //   duration: 500, //可根据实际采集时间间隔设置
  //   //   // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
  //   //   // autoRotation: true,
  //   // });
  // });
}

function trajectoryTrully() {
  let marker1 = new AMap.Marker({
    map: aMap,
    position: [119.899013, 30.266497],
    icon: "/public/img/cockpit/UAVNormal.png",
    offset: new AMap.Pixel(-13, -26),
  });
  marker1.on("moving", function (e) {
    passedPolyline.setPath(e.passedPath);
    aMap.setCenter(e.target.getPosition(), true);
  });
  let polyline1 = new AMap.Polyline({
    map: aMap,
    path: trullyPositionOk,
    showDir: true,
    strokeColor: "#28F", //线颜色
    // strokeOpacity: 1,     //线透明度
    strokeWeight: 6, //线宽
    // strokeStyle: "solid"  //线样式
  });
  var passedPolyline = new AMap.Polyline({
    map: aMap,
    strokeColor: "#AF5", //线颜色
    strokeWeight: 6, //线宽
  });

  let markerList = [marker1];
  let lineList = [trullyPositionOk];

  aMap.setFitView([polyline1]);

  AMap.plugin("AMap.MoveAnimation", () => {
    markerList.forEach((item, index) => {
      item.moveAlong(lineList[index], {
        // 每一段的时长
        duration: 500, //可根据实际采集时间间隔设置
        // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
        // autoRotation: true,
      });
    });
    // marker1.moveAlong(line1, {
    //   // 每一段的时长
    //   duration: 500, //可根据实际采集时间间隔设置
    //   // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
    //   // autoRotation: true,
    // });
  });
}

onMounted(async () => {
  await initMap();
  await getDetailInfo();
  await trullyFlyTrajectory();
  aMap.add([marker1, polyline1]);
});
</script>

<style scoped lang="scss">
.container {
  width: 98%;
  height: 93%;
  margin: 0 auto;

  .down-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 17px;
    top: 5px;
    height: 40px;

    .btn {
      width: 81px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      color: #fff;
      background: rgba(43, 193, 123, 1);
      cursor: pointer;
      &:hover {
        background: rgba(43, 193, 123, 0.85);
      }
    }

    .btn.delete {
      color: rgba(102, 102, 102, 1);
      background: #fff;
      border: 1px solid rgba(220, 223, 230, 1);
      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  :deep .el-table__header-wrapper {
    margin-bottom: 10px;

    :deep .el-table__header {
      height: 73px;

      :deep th {
        font-size: 16px;
        font-weight: 400;
        background: rgba(255, 255, 255, 1) !important;
      }
    }
  }

  :deep .el-table__body-wrapper {
    :deep .el-table__body .el-table__row {
      height: 60px;
      font-size: 14px;
      font-weight: 400;
    }
  }

  :deep .el-tabs .el-tabs__header .el-tabs__item {
    font-family: PingFang;
    font-size: 16px !important;
    font-weight: 400 !important;
    // color: rgba(42, 130, 228, 1);
  }

  :deep .el-tabs .el-tabs__content {
    color: rgba(56, 56, 56, 1);
    font-family: PingFang;
    font-size: 16px;
    height: 250px;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer and Edge */
    :deep .content-line {
      padding: 15px 0;
      border-bottom: 1px rgba(242, 242, 242, 0.2) dashed;
      display: flex;
      justify-content: space-between;

      :deep .contant {
        display: block;
        text-align: right;
        width: 147px;
        color: rgba(166, 166, 166, 1);
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
    }
  }

  :deep .el-tabs__content::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }

  :deep .el-tabs__nav-wrap::after {
    background-color: #ffffff;
  }

  #map {
    width: 100%;
    height: 100%;
  }

  .airspaceLayer {
    position: absolute;
    width: 30px;
    height: 30px;
    background: url("@/assets/images/airspacePop.png");
    background-size: 100% 100%;
    right: 50px;
    bottom: 18%;
    z-index: 1000;
  }

  .layerControl {
    width: 210px;
    height: auto;
    position: absolute;
    z-index: 1000;
    bottom: 23%;
    right: 50px;
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    padding: 18px 21px 15px;

    .el-checkbox-group {
      max-height: 250px;
      margin-left: 20px;
      overflow: hidden;
      overflow-y: scroll; /* 显示垂直滚动条 */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* Internet Explorer and Edge */
      .checkTitleClass {
        width: 150px;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 使用省略号隐藏 */
      }
    }
    .el-checkbox-group::-webkit-scrollbar {
      display: none; /* Safari and Chrome */
    }
    .el-checkbox {
      height: 24px;
    }
  }

  .trackContainer {
    width: 98%;
    height: 14.3%;
    background: rgb(244, 244, 244);
    position: absolute;
    bottom: 10px;

    :deep .el-table thead tr {
      background-color: #ffffff;
    }

    :deep .el-table__header-wrapper {
      overflow: hidden;
      margin-bottom: 7px;
    }
  }

  .aircraftDetail {
    font-size: 14px;
    color: #2a82e4;
    font-weight: 400;
    cursor: pointer;
  }

  .flightPlanDetail {
    font-size: 14px;
    color: #2a82e4;
    font-weight: 400;
    cursor: pointer;
  }

  .detailTabs {
    position: absolute;
    z-index: 100;
    width: 390px;
    padding: 15px 20px 19px;
    top: 200px;
    left: 200px;
    border-radius: 7px;
    background: #fff;

    .content-line {
      margin: 4px 0 4px;

      span {
        font-size: 12px;
        color: black;
      }
      span:nth-child(2) {
        margin-left: 5px;
      }
      .contant {
        color: #a6a6a6;
        font-size: 12px;
      }
    }

    // .el-tabs .el-tabs__content {
    //   color: #e6e6e6;
    //   font-size: 16px;
    //   height: 250px;
    //   overflow-y: scroll;
    //   scrollbar-width: none; /* Firefox */
    //   -ms-overflow-style: none; /* Internet Explorer and Edge */
    //   .content-line {
    //     padding: 15px 0;
    //     border-bottom: 1px rgba(242, 242, 242, 0.2) dashed;
    //     display: flex;
    //     justify-content: space-between;

    //     // .contant {
    //     //   display: block;
    //     //   text-align: right;
    //     //   width: 247px;
    //     //   white-space: nowrap; /* 防止文本换行 */
    //     //   overflow: hidden; /* 隐藏超出部分 */
    //     //   text-overflow: ellipsis; /* 显示省略号 */
    //     // }
    //   }
    // }
    .goBack {
      width: 100px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      font-family: PingFang;
      color: rgba(0, 0, 0, 1);
      border-radius: 4px;
      background: rgba(217, 233, 250, 1);
      border: 1px solid rgba(42, 130, 228, 1);
    }
  }
}
</style>
